<template>
    <drop-down :menus="attrs" class="">
        <template #refrence>
            <slot></slot>
        </template>
        <template #content>
            <x-drop-sub-item v-for="item in attrs" :key="item.label" :icon="item.icon" :label="item.label">
                <x-drop-item v-for="xitem in item.children" :key="xitem.label" :label="xitem.label" :icon="xitem.icon">
                    <x-cmpnt-render :cmpnt="xitem.cmpnt" :data="xitem.data"> </x-cmpnt-render>
                </x-drop-item>
            </x-drop-sub-item>
        </template>
    </drop-down>
</template>

<script setup>

import { defineProps, defineEmits, ref, nextTick, reactive } from 'vue';
import { func, store } from "pkgs/stores"
import dropDown from "pkgs/designers/dropdown/dropDown.vue";
import _lodash from "lodash";
const emit = defineEmits(['update:fields']);
// 定义 props
const props = defineProps({
    fields: {
        type: Array,
        default: () => []
    },
    cmpnt: {
        type: Object,
        default: () => { }
    },
    bizData: {
        type: Object,
        default: () => { }
    },
});

//构建组件，数据库菜单
const attrs = ref({})
attrs.value.cmpnt = { label: "组件属性", children: [] }
attrs.value.cmpnt.children.push(..._.values(func.getAttrs(props.cmpnt.props)))
attrs.value.cmpnt.children.push(..._.values(func.getAttrs(props.cmpnt.props.style)))

//构建数据库菜单
if (props.cmpnt.catgory == 'containers') {
    attrs.value.db = { icon: "fa fa-database", label: "数据库", children: [] }
    const tmpData = ref({})
    attrs.value.db.children.push(...$biz.schema().getFields4Check("xcode_user",
        tmpData.value, appendFields))

    // 定义 emits,字段变化后通知父组件

    function appendFields(field, isChecked) {
        const newFields = [...props.fields];
        if (isChecked) {
            if (!newFields.some(f => f.name === field.name)) {
                let cmpnt = field.fieldCmpnt
                if (!props.bizData[field.name])
                    props.bizData[field.name] = ""
                newFields.push({ title: field.title, data: props.bizData, cmpnts: [cmpnt] });
            }
        } else {
            newFields.splice(newFields.findIndex(f => f.name === field.name), 1);
        }
        emit('update:fields', newFields);
    }
}





</script>
<style scoped></style>